<template>
  <div> 
    <mt-header fixed title="单项赛个人报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>    
    <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
    <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>
    <step current=1 :stepArr="stepArr"></step>
    <div>  
      <div class="cf">
        <span class="f16 m10 mt15 fwb fl">填写信息</span>
        <mt-switch class="fr f14 m10" v-model="isTA">给TA报名</mt-switch> 
      </div>
      <div class="my-field" style="margin-top:0;" v-show="!isTA">
        <div class="my-field-item"><span class="my-field-item-l">姓名</span><span class="my-field-item-r">{{obj.realName}}</span></div> 
        <div class="my-field-item"><span class="my-field-item-l">证件类型</span><span class="my-field-item-r">{{getCertName(obj.certType)}}</span></div> 
        <div class="my-field-item"><span class="my-field-item-l">证件号码</span><span class="my-field-item-r">{{obj.certNo}}</span></div> 
        <div class="my-field-item"><span class="my-field-item-l">性别</span><span class="my-field-item-r">{{obj.sex}}</span></div> 
        <div class="my-field-item"><span class="my-field-item-l">年龄</span><span class="my-field-item-r">{{obj.age}}</span></div>
        <div class="my-field-item"><span class="my-field-item-l">衣码</span><span class="my-field-item-r">{{getSizeName(obj.size)}}</span></div> 
        <div class="my-field-item"><span class="my-field-item-l">手机号</span><span class="my-field-item-r">{{obj.mobile}}</span></div> 
      </div>

      <div class="my-field" style="margin-top:0;" v-show="isTA">
        <div class="my-field-item"><span class="my-field-item-l">姓名</span><span class="my-field-item-r"><input type="text" class="f14" placeholder="请输入姓名" :attr="{maxlength:10}" v-model="objTA.realName" name=""></span></div> 
        <div class="my-field-item"><span class="my-field-item-l">证件类型</span><span class="my-field-item-r"><popup-radio style="flex:1;" v-model="objTA.certType" :options='certList'  title="请输入证件类型"></popup-radio></span></div> 
        <div class="my-field-item"><span class="my-field-item-l">证件号码</span><span class="my-field-item-r"><input type="text" class="f14" placeholder="请输入证件号码" :attr="{maxlength:10}" v-model="objTA.certNo" name=""></span></div> 
        <div class="my-field-item"><span class="my-field-item-l">性别</span><span class="my-field-item-r"><popup-radio style="flex:1;" v-model="objTA.sex" :options='sexArr' title="请选择性别"></popup-radio></span></div> 
        <div class="my-field-item"><span class="my-field-item-l">年龄</span><span class="my-field-item-r"><popup-age style="flex:1;" v-model="objTA.age" title="请选择年龄"></popup-age></span></div> 
        <div class="my-field-item"><span class="my-field-item-l">衣码</span><span class="my-field-item-r"><popup-radio v-model="objTA.size" :options='sizeArr' title="请选择衣码" ></popup-radio></span></div> 
        <div class="my-field-item"><span class="my-field-item-l">手机号</span><span class="my-field-item-r"><input type="text" class="f14" placeholder="请输入手机号" :attr="{maxlength:10}" v-model="objTA.mobile" name=""></span></div> 
      </div>
      <div style="display: flex; margin: 10px;"><mt-button @click='$router.push("/enroll/single/step2")' style="flex:1;" type="primary">下一步</mt-button></div>
    </div>

    <!-- 弹出框 --> 
    <mt-popup v-model="popSex" style="width:80%;">
      <mt-radio title="请选择性别" v-model="objTA.sex" align="right" :options="['男', '女']"></mt-radio>
    </mt-popup>

    <mt-popup v-model="popCert" style="width:80%; ">
      <mt-radio title="请选择证件类型" @change="onCretChange" v-model="objTA.sex" align="right" :options="certList"></mt-radio>
    </mt-popup>

  </div>
</template>

<script>
import step from '@/components/step'
import popupRadio from '@/components/popupRadio'
import popupAge from '@/components/popupAge'

export default {   
  components:{    
    step,popupRadio,popupAge
  },
  data () {
    return {
      stepArr:['填写信息','选择俱乐部','选择项目','选择搭档','报名预览','支付完成'],
      obj:{
        realName:"张三丰",
        certType:1,
        certNo:"430125198805201215",
        sex:"男",
        age:"33",
        size:"L",
        mobile:"13912345678"
      },
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      sizeArr:[{value:"S",name:"小号"},{value:"M",name:"中号"},{value:"L",name:"大号"},{value:"XL",name:"加大号"},{value:"XXL",name:"加加大号"}],
      isTA:false,
      popSex:false,
      popAge:false,
      popCert:false,
      objTA:{
      },
      dataList: [
        {
          flex: 1,
          values: [],
          defaultIndex:0
        }
      ]
    }
  },
  mounted(){
    this.initAge();
  }, 
  methods: {
    initAge(){
      var val = 2000;
      var arr = [];
      var year = new Date().getFullYear(); 
      var curr = new Date().getFullYear();
      for (var i = 0; i < 70; i++) {
        year--;
        if(curr - year >= 16) arr.push(year); 
      }  
      var num = 0;
      for (var i = 0; i < arr.length; i++) {
        if(arr[i] == val) num = i;
      } 
      this.dataList[0]["values"] = arr;
      this.dataList[0]["defaultIndex"] = num;
    },
    onCretChange(picker, values) {
      if(this.popAge){
        var year = new Date().getFullYear(); 
        this.objTA.age = year - values[0]; 
      }
    },
    getCertName(t){
      var arr = this.certList;
      var str = '';
      for (var i = 0; i < arr.length; i++) {
        if(arr[i]["value"] == t){
          str = arr[i]["name"];
        }
      }
      return str;
    },
    getSizeName(size){ 
      var str = "";
      var arr = this.sizeArr;
      for (var i = 0; i < arr.length; i++) {
        if(arr[i]["value"] == size){
          str = arr[i]["name"];
        }
      }
      return str;
    }
  }
}
</script>